<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%@ include file="../common/include/header.jsp" %>

<div style="width: 980px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td style="width: 180px;vertical-align: top;background:  #fdb73a;">
			<%@ include file="../common/include/leftmenu.jsp" %>
		</td>
<td style="text-align: center;width: 800px;background: #ffffff;vertical-align: top">

	<div id="datamain" style="width: 800px;vertical-align: top;">
	
		<table style="width: 800px;height: 500px;" border="0" cellpadding="0" cellspacing="0">
			<tr><td colspan="2" style="height: 150px;vertical-align: top;"><img src="<%=imagePath %>data_05.jpg" border="0"/></td>
				<td rowspan="3" style="background-image: url('<%=imagePath %>data_06.jpg');width:200px;"></td></tr>			
				
			<tr><td style="width: 300px;height: 170px;vertical-align: top;">
					<table style="width: 290px;">
						<tr><td style="height: 30px;width: 260px;">
								<a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','일본어자료실');">
								<img src="<%=imagePath %>data_01.jpg" border="0"/></a></td>
							<td style="width: 30px;"><a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','일본어자료실');">
								<img src="<%=imagePath %>icon_more.jpg" border="0"></a></td></tr>
					</table>
					<table style="width: 290px;border: 1px dotted #dddddd;">
						<tbody id="dboard"></tbody>
					</table>
				</td>
				
				<td style="width: 300px;height: 170px;vertical-align: top;">
				<table style="width: 290px;">
				<tr><td style="height: 30px;width: 260px;">
					<a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','일본어강좌');">
					<img src="<%=imagePath %>data_02.jpg" border="0"/></a></td>
						<td style="width: 30px;"><a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','일본어강좌');">
							<img src="<%=imagePath %>icon_more.jpg" border="0"></a></td></tr>
				</table>
					<table style="width: 290px;border: 1px dotted #dddddd;">
						<tbody id="dboard"></tbody>
					</table>
				</td></tr>
				
			<tr><td style="width: 300px;height: 170px;vertical-align: top; padding-top: 10px;">
				<table style="width: 290px;">
				<tr><td style="height: 30px;width: 260px;">
					<a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','프로그램자료실');">
					<img src="<%=imagePath %>data_03.jpg" border="0"/></a></td>
						<td style="width: 30px;"><a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','프로그램자료실');">
							<img src="<%=imagePath %>icon_more.jpg" border="0"></a></td></tr>
				</table>
					<table style="width: 290px;border: 1px dotted #dddddd;">
						<tbody id="dboard"></tbody>
					</table>
				</td>
				<td style="width: 300px;height: 170px;vertical-align: top; padding-top: 10px;">
				<table style="width: 290px;">
				<tr><td style="height: 30px;width: 260px;">
					<a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','프로그램강좌');">
					<img src="<%=imagePath %>data_03.jpg" border="0"/></a></td>
						<td style="width: 30px;"><a href="javascript:getBoard('databoard.do?method=getList&cono=7&dbname=','프로그램강좌');">
							<img src="<%=imagePath %>icon_more.jpg" border="0"></a></td></tr>
				</table>
					<table style="width: 290px;border: 1px dotted #dddddd;">
						<tbody id="dboard"></tbody>
					</table>
				</td></tr>

		</table>		
	</div>
	
</td>
	</tr>
</table>
</div>

<script type="text/javascript">
	//window.attachEvent("onload",callBoards);
	
	window.onload = function(){
		callBoards();
	}
	
	var xmlHttp;
	function createXMLHttpRequest(){
		if(window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}else if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}
	}
	
	function callBoards(){
		var url = "<%=path%>/board/menuajaxaction.do?method=datamain";
		createXMLHttpRequest();
		xmlHttp.open("GET",url,true);		
		xmlHttp.onreadystatechange = handleStateChange;
		xmlHttp.send(null);
	}
	
	function handleStateChange(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){				
				loadBoards();
			}
		}
	}
	
	function loadBoards(){
		var xmlDoc = xmlHttp.responseXML;
		var databoards = xmlDoc.getElementsByTagName('databoard');
		
		for(var i =0; i<databoards.length;i++){
			var datas = databoards[i].getElementsByTagName('db');
			var databody = dboard[i];
				
			for(var j=0; j<datas.length;j++){
				var dbno = datas[j].getElementsByTagName('dbno')[0].firstChild.nodeValue;				
				var dbname = datas[j].getElementsByTagName('dbname')[0].firstChild.nodeValue;				
				var cono = datas[j].getElementsByTagName('cono')[0].firstChild.nodeValue;				
				var dbtitle = datas[j].getElementsByTagName('dbtitle')[0].firstChild.nodeValue;				
				var dbdate = datas[j].getElementsByTagName('dbdate')[0].firstChild.nodeValue;				
				var url = "databoard.do?method=detailview&dbno="+dbno;
				databody.appendChild(createCell(dbno,dbtitle,dbdate,url));
			}					
		}
		xmlHttp = null;
	}
	
	function createCell(no,title,date,url){
		var cell = document.createElement('tr');
		
		var icon = document.createElement('td');
		var img = document.createElement('img');
		img.src = "<%=imagePath%>icon_topmenu.jpg";
		icon.appendChild(img);
		
		var dbtitle = document.createElement('td');
		var link = document.createElement('a');
		link.appendChild(document.createTextNode(title));
		link.href = "<%=path%>/board/"+url;
		dbtitle.appendChild(link);
		dbtitle.style.textAlign = "left";
		dbtitle.style.width = "250";
		
		var dbdate = document.createElement('td');
		dbdate.appendChild(document.createTextNode("["+date.replace(/\-/g,"\/")+"]"));
		dbdate.style.fontSize = "8pt";
		
		cell.appendChild(icon);
		cell.appendChild(dbdate);
		cell.appendChild(dbtitle);
		
		
		cell.style.height = "20";
		
		return cell;		
	}


</script>


<%@ include file="../common/include/footer.jsp" %>